<template>
  <div>
    <a-drawer
      :title="`${title}警情`"
      placement="right"
      :closable="false"
      :visible="visible"
      v-if="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
      width="1100"
    >
      <a-button @click="handle">导出</a-button>
      <list :portionUrl="urlone" :params="queryForm" @change="handleList" />
    </a-drawer>
  </div>
</template>
<script lang="ts">
import list from '@/components/police-list/index.vue';
import { ref, defineComponent, reactive } from 'vue';
import { exportExcel } from '@/api/intelligentanalysis/alert';
import { message } from 'ant-design-vue';
import { downloadExcel } from '@/utils/download';
export default defineComponent({
  name: '',
  components: {
    list,
  },
  setup() {
    const urlone = ref<any>('/aitype/caseInfo/queryCaseInfo');
    //打开弹框
    const visible = ref<boolean>(false);
    const showDrawer = () => {
      visible.value = true;
    };
    const onClose = () => {
      visible.value = false;
    };
    const title = ref<string>('');
    const queryForm = reactive({
      page: 1,
      size: 50,
      classifyCodes: '',
      callSummaryCode: '',
      callTimeStart: '',
      date: '',
      groupField: '',
      xqdwCode: '',
      age: '',
      sex: '',
      labelCodes: '',
    });
    const caseNos = ref<any>([]);
    const handleList = value => {
      caseNos.value = value.toString();
    };
    //导出
    const handle = () => {
      if (caseNos.value.length) {
        let obj = Object.assign({ caseNos: caseNos.value }, queryForm);
        exportExcel(obj).then(res => {
          downloadExcel(res, '警情列表');
        });
      } else {
        message.error('请选择!');
      }
    };
    return {
      handleList,
      handle,
      title,
      visible,
      showDrawer,
      onClose,
      labelCol: { span: 4 },
      wrapperCol: { span: 15 },
      queryForm,
      urlone,
      caseNos,
    };
  },
});
</script>
<style lang="less">
.bjtitle {
  padding-left: 30px;
  color: #fff;
  font-weight: 700;
}
.circle {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 10px;
  background: #f90;
  border-radius: 50%;
}
.checkboxel {
  margin-top: 20px;
  border-bottom: 3px solid #1f1f1f;
}
.checkboxel:last-child {
  border-bottom: 0;
}
.checkboxel:first-child {
  margin-top: 0px;
}
</style>
